<template>
  <view class="content_box">
    <scroll-view scroll-y style="height: calc(100vh - 100rpx)">
      <view class="li_box">
        <view class="card_green_box">
          <view style="margin-top: 10rpx" class="card_li_box">
            <view>检测指标</view>
            <view>
              <input v-model="obj.detectionIndicator" placeholder="请输入检测指标" type="text">
            </view>
          </view>
          <view style="margin-top: 10rpx" class="card_li_box">
            <view>指标数据</view>
            <view>
              <input v-model="obj.indicatorData" placeholder="请输入指标数据" type="text">
            </view>
          </view>
          <view style="margin-top: 10rpx" class="card_li_box">
            <view>原料类别</view>
            <view>
              <input v-model="obj.rawMaterialCategory" placeholder="请输入原料类别" type="text">
            </view>
          </view>
          <view style="margin-top: 10rpx" class="card_li_box">
            <view>取样点</view>
            <view>
              <input v-model="obj.samplingLocation" placeholder="请输入取样点" type="text">
            </view>
          </view>
          <view style="margin-top: 10rpx" class="card_li_box">
            <view>英文</view>
            <view>
              <input v-model="obj.english" placeholder="请输入英文" type="text">
            </view>
          </view>
          <view style="margin-top: 10rpx" class="card_li_box">
            <view>检测要求</view>
            <view>
              <input v-model="obj.detectionRequirement" placeholder="请输入检测要求" type="text">
            </view>
          </view>
          <view style="margin-top: 10rpx" class="card_li_box">
            <view>检测频率备注</view>
          </view>
          <view class="li_input" style="width: 100%">
            <textarea v-model="obj.detectionRemark" class="textarea_border border_input" readonly />
          </view>
          <u-line color="#c2c9c4" />
          <view class="btn_list_box">
            <view class="btn_box" style="background-color: #53c21d" @click="submitForm">确认</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import { processDetailAdd, processDetailEdit } from '../api/api.js';
export default {
  data() {
    return {
      list: [],
      obj: {
        detectionIndicator: '',//检测指标
        detectionRemark: '',//检测备注
        detectionRequirement: '',//检测要求
        english: '',//英文
        indicatorData: '',//指标数据
        detectionIndicatorUnit: '%',//检测指标单位
        processId: '',//工艺类型id
        rawMaterialCategory: '',//原料类别
        samplingLocation: '',//采样点
        id: '',
      }
    };
  },
  methods: {
    submitForm() {
      if (this.obj.id == '') {
        this.obj.processId = uni.getStorageSync('processId');
        if (
          this.obj.detectionIndicator==''||
          this.obj,detectionRemark==''||
          this.obj.detectionRequirement==''||
          this.english==''||
          this.indicatorData == ''||
          this.rawMaterialCategory ==''||
          this.samplingLocation==''
        ) {
          console.log('对象中存在空属性');
          uni.showToast({
            title: '请输入完整',
            icon: 'none'
          })
        }else{
          processDetailAdd(this.obj).then(res => {
          if (res.data.code == 200) {
            uni.showToast({
              title: res.data.msg,
              duration: 2000
            });
            setTimeout(() => {
              this.clearForm();
              uni.navigateBack({
                delta: 1
              });
            }, 1000)
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none'
            });
          }
        })
        } 
        
      } else {
        let hasEmpty = Object.values(this.obj).some(value => {
          return value === null || value === undefined || value === '';
        });

        if (hasEmpty) {
          console.log('对象中存在空属性');
          uni.showToast({
            title: '请输入完整',
            icon: 'none'
          })
        } else {
          processDetailEdit(this.obj).then(res => {
            if (res.data.code == 200) {
              uni.showToast({
                title: res.data.msg,
                duration: 2000
              });
              setTimeout(() => {
                this.clearForm();
                uni.navigateBack({
                  delta: 1
                });
              }, 1000)
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: 'none'
              });
            }
          })
        }

      }
    },
    clearForm() {
      this.obj = {
        detectionIndicator: '',//检测指标
        detectionRemark: '',//检测备注
        detectionRequirement: '',//检测要求
        english: '',//英文
        indicatorData: '',//指标数据
        detectionIndicatorUnit: '%',//检测指标单位
        processId: '',//工艺类型id
        rawMaterialCategory: '',//原料类别
        samplingLocation: '',//采样点
        id: '',
      }
    }

  },
  onLoad(options) {
    console.log(options);
    if (options.flag == 1) {
      uni.setNavigationBarTitle({
        title: '新增工艺详情'
      });
    } else {
      let row = uni.getStorageSync('dataDetail');
      this.obj = {
        detectionIndicator: row.detectionIndicator,//检测指标
        detectionRemark: row.detectionRemark,//检测备注
        detectionRequirement: row.detectionRequirement,//检测要求
        english: row.english,//英文
        indicatorData: row.indicatorData,//指标数据
        processId: row.processId,//工艺类型id
        rawMaterialCategory: row.rawMaterialCategory,//原料类别
        samplingLocation: row.samplingLocation,//采样点
        id: row.id,
      }
      uni.setNavigationBarTitle({
        title: '修改工艺详情'
      });

    }

    console.log(this.obj);
  },
  onShow() {

  },
};
</script>
<style lang="scss" scoped>
.li_input {
  width: 80%;

  .border_input {
    border-radius: 10rpx;
    height: 50rpx;
    width: 100%;
  }
}

.textarea_border {
  margin-top: 20rpx !important;
  background-color: #c5ddcd;
  height: 200rpx !important;
}

.btn_list_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin-top: 20rpx;

  .btn_box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    width: 100%;
    height: 100%;
    background-color: #d93434;
    color: #fff;
  }
}

.content_box {
  width: 100vw;
  min-height: 100vh;
  background-color: #e3ede2;

  .li_box {
    width: 100vw;
    padding: 20rpx;
    box-sizing: border-box;

    .card_green_box {
      padding: 20rpx;
      background-color: #f4fbf3;
      color: #1b9c46;
      border-radius: 10rpx;

      // font-size: 28rpx;
      .card_title_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;
        font-weight: 700;

        .card_tag_green {
          background-color: #1b9c46;
          color: #fff;
          padding: 5px 8px;
          // font-size: 24rpx;
          border-radius: 8rpx;
        }
      }

      .card_li_box {
        margin-bottom: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
      }
    }
  }

  .btn_green_box {
    width: 100%;
    height: 80rpx;
    border-radius: 14rpx;
    background-color: #1b9c46;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 20rpx;
  }

  .fixed_btn_green_box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 120rpx;
    background-color: #e3ede2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
